import React, { PureComponent } from "react"
import { Wrapper } from "./booklist.css"
export default class BookList extends PureComponent {
  constructor() {
    super()
    this.state = {
      bookList: [
        { name: "js高级设计", sale: 20, price: 18 },
        { name: "java零基础开发", sale: 29, price: 3 },
        { name: "js设计模式", sale: 100, price: 109 }
      ]
    }
  }
  onDelete(book) {
    const { bookList } = this.state
    const list = bookList.filter((item) => item !== book)
    this.setState({
      // 自动更新render
      bookList: list
    })
  }

  render() {
    const onRender = (list) => {
      const bol = list.length > 0
      if (bol) {
        return (
          <ul>
            {bookList.map((book) => (
              <li key={book.name}>
                书名：{book.name}, 销量: {book.sale},
                <span>价格: {book.price}</span>
                <button onClick={() => this.onDelete(book)}>删除</button>
              </li>
            ))}
          </ul>
        )
      } else return <h1>暂无更多...</h1>
    }
    const { bookList } = this.state
    return (
      <div>
        <Wrapper>
          <div>{onRender(bookList)}</div>
        </Wrapper>
      </div>
    )
  }
}
